<template>
  <div class="category">
    <div class="category-header">
      <p>{{title}}</p>
      <div>
        <a :class="{active:tap}" @click="changeTap(!tap)">有新动态</a>
        <a :class="{active:!tap}" @click="changeTap(!tap)">最新投稿</a>
      </div>
      <a>更多></a>
    </div>
    <div class="category-content">
      <div v-for="item in playList" :key="item.uid" class="category-item" @click="toDetail(item.vid)">
        <a>
          <div class="category-item-top">
            <img :src="item.coverPic" alt="">
            <i></i>
            <span>{{item.vTime}}</span>
          </div>
          <div class="category-item-bottom">
            <p>{{item.vTitle}}</p>
            <div>
              <span>
                <i class="left-i"></i>
                {{item.vPlay}}
              </span>
              <span>
                <i class="right-i"></i>
                {{item.comments}}
              </span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'categoryLeft',
  data(){
    return{
      tap:true,
      reverList:[]
    }
  },
  props:{
    title:String,
    playList:Array
  },
  methods:{
    // 切换
    changeTap(tap){
      this.tap = tap
      this.reverList = this.playList
      this.reverList = this.reverList.reverse()
    },
    // 跳转到视频页
    toDetail(id){
      this.$router.push({
        name:'Detail',
        query:{
          vid:id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.category{
  width: 900px;
  float: left;
  overflow: hidden;
  margin-bottom: 40px;
}
.category-header{
  width: 880px;
  height: 24px;
  padding: 0 20px 20px 0;
}
.category-header p{
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
  margin-right: 20px;
  float: left;
  color: #222;
}
.category-header div{
  float: left;
  margin: 0 10px 0 0;
  a{
    position: relative;
    margin-right: 12px;
    font-size: 12px;
    width: 48px;
    height: 20px;
    line-height: 20px;
  }
}
.active{
  border-bottom: 1px solid #00a1d6;
}
.category-header>a{
  float: right;
  width: 52px;
  height: 22px;
  font-size: 12px;
  line-height: 22px;
  background-color: #fff;
  border: 1px solid #ccd0d7;
  color: #555;
  border-radius: 4px;
  text-align: center;
  margin: 0 0 0 10px;
  transition: all .2s;
  &:hover{
    background-color: #ccd0d7;
  }
}
.category-content{
  width: 900px;
  overflow: hidden;
}
.category-item{
  float: left;
  margin: 0 20px 20px 0;
  position: relative;
  width: 160px;
  height: 148px;
  font-size: 12px;
  overflow: hidden;
  &:hover p {
    color: #00a1d6;
  }
}
.category-item-top{
  position: relative;
  width: 160px;
  height: 100px;
  display: block;
  overflow: hidden;
  text-align: center;
  border-radius: 4px;
  &:hover span{
    opacity: 1;
  }
  img{
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
  }
  i{
    background-position: -849px -212px;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 24px;
    pointer-events: none;
    background-image: url(../../static/images/icons.png);
  }
  span{
    opacity: 0;
    position: absolute;
    bottom: 2px;
    left: 6px;
    color: #fff;
    height: 12px;
    line-height: 12px;
    padding: 0 5px 1px 0;
  }
}
.category-item-bottom{
  &:hover{
    div{
      display: none;
    }
  }
  p{
    padding-top: 8px;
    height: 40px;
    line-height: 20px;
    transition: all .2s linear;
    color: #222;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-align: left;
  }
  div{
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 20px;
    line-height: 20px;
    color: #99a2aa;
    background-color: #fff;
    transition: all .3s;
    font-size: 0;
    span{
      line-height: 12px;
      height: 14px;
      display: inline-block;
      width: 50%;
      overflow: hidden;
      font-size: 12px;
      vertical-align: bottom;
      i{
        display: inline-block;
        width: 12px;
        height: 12px;
        vertical-align: top;
        margin-right: 5px;
        background-image: url(../../static/images/icons.png);
        &.left-i{
          background-position: -282px -90px;
        }
        &.right-i{
          background-position: -282px -218px;
        }
      }
    }
  }
}
</style>